<template>
	<view class="tree">
		<!-- <view class="tree-t"></view> -->
		<view class="tree-l" v-if="node.length > 1"></view>
		<!-- <view class="tree-r" v-if="node.length - 1 === index"></view> -->
		<view v-for="(it,index) in node" :class="node.length - 1 === index ? 'tree-layout' : 'tree-layout tree-layout-t' ">
			
			<view class="tree-box" v-if="true">
				<view class="tree-c border flex-center" :id="'item'+it.id">
					<image :src="it.avatar" mode="aspectFill" class="avatar" v-if="it.id != ''" @click="editGenealogy(it)"></image>
					<!-- <view class="avatar-tx flex-center" v-else>编辑</view> -->
					<view class="tree-name" @click="editGenealogy(it)">{{it.genealogy_name}}</view>
					<view class="tree-subTitle" @click="editGenealogy(it)">{{it.name || ''}}</view>
					<!-- <picker mode="selector" :range="list" range-key="label" @change="e => change(e,it)">
						<view class="tree-btn flex-center">关联家人</view>
					</picker> -->
					<view class="tree-line-c"></view>
					<view class="tree-line-b" v-if="index === 0"></view>
					<!-- <view class="tree-layout-l" v-if="index === 0"></view> -->
					<!-- <view class="tree-line-l" v-if="index > 0"></view> -->
				</view>
				<view class="tree-c border flex-center wife" v-if="it.spouse_name" @click="edit(it)">
					<image :src="it.spouse_avatar" mode="aspectFill" class="avatar" v-if="it.spouse_avatar"></image>
					<view class="avatar-tx flex-center" v-else style="margin: 30rpx 0;">配偶</view>
					<view class="tree-name">{{it.spouse_name}}</view>
					<!-- <view class="tree-subTitle">星一到都</view> -->
				</view>
			</view>
			<view class="tree-box" v-else>
				<view class="tree-c flex-center" :id="'item'+it.id">
					<image :src="mixiImgUrl + '/static/chuanjjiap.png'" mode="" class="avatar"></image>
					<view class="tree-name">{{it.label}}{{it.id}}</view>
					<view class="tree-subTitle">星一</view>
					<view class="tree-line-c"></view>
					<view class="tree-line-b" v-if="index === 0"></view>
					<view class="tree-layout-l" v-if="index === 0"></view>
					<view class="tree-line-l" v-if="index > 0"></view>
				</view>
				<!-- <view class="tree-c flex-center wife">
					<image :src="mixiImgUrl + '/static/chuanjjiap.png'" mode="" class="avatar"></image>
					<view class="tree-name">金海是啥{{it.rect}}</view>
					<view class="tree-subTitle">星一到都是</view>
				</view> -->
			</view>
			<view class="tree-node" v-if="Array.isArray(it.child) && it.child.length > 0">
				<treeVue :node="it.child" :query="query" :level="level + 1"/>
			</view>
		</view>

	</view>

</template>

<script>
	import treeVue from '@/pages/genealogy/detail/components/tree/tree.vue';
	export default {
		components: {
			treeVue
		},
		props: {
			node: {
				type: Array,
				default: () => []
			},
			type: {
				type: Number,
				default: () => 0 //0编辑 1 查看
			},
			query: {
				type: Object,
				default: () => {
					genealogy_id: ''
				}
			},
			level: {
				type: Number,
				default: () => 0
			}
		},
		data() {
			return {
				list: [
					{
						label: '配偶'
					},
					{
						label: '子女'
					},
					{
						label: '兄弟姐妹'
					},
					{
						label: '入继'
					},
				]
			}
		},
		mounted() {
			this.node.forEach(i=>{
				const query = uni.createSelectorQuery().in(this);
				query
				  .selectAll("#item"+i.id)
				  .boundingClientRect((data) => {
					  i.rect = data
				    console.log("得到布局位置信息" + JSON.stringify(data));
				    console.log("节点离页面顶部的距离为" + data.top);
				  })
				  .exec();
			})
			
		},
		methods:{
			edit(it){
				return
				uni.navigateTo({
					url:'/pages/spouse-information/spouse-information?id=' + it.id
				})
			},
			 editGenealogy(it){
				 return
				uni.navigateTo({
					url:'/pages/genealogy/tree/basicInfo?id=' + it.id + '&genealogy_id=' + this.query.genealogy_id + '&pid=' + it.id
				})
			 },
			change(e,it){
				return
				console.log('e', e, it)
				switch (e.detail.value){
					
					case '0':
						uni.navigateTo({
							url:'/pages/spouse-information/spouse-information?id=' + it.id
						})
						
						break;
					case '1':
						uni.navigateTo({
							url:'/pages/genealogy/tree/basicInfo?type=2&genealogy_id=' + this.query.genealogy_id + '&pid=' + it.id + '&hang_bei=' + it.hang_bei
						})
						break;
					case '2':
						uni.navigateTo({
							url:'/pages/genealogy/tree/basicInfo?type=3&genealogy_id=' + this.query.genealogy_id + '&pid=' + it.pid + '&hang_bei=' + it.hang_bei
						})
						break;
					case '3':
						uni.navigateTo({
							url:'/pages/genealogy/tree/basicInfo?type=4&genealogy_id=' + this.query.genealogy_id + '&pid=' + it.id + '&hang_bei=' + it.hang_bei
						})
					break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tree {
		display: flex;
		position: relative;
		// overflow-x: scroll;
		// border-right: 1rpx solid #e4393c;
	}
	.tree-box {
		width: fit-content;
		display: flex;
		align-items: flex-start;
		margin-right: 60rpx;
		margin-bottom: 100rpx;
		position: relative;
		overflow: visible;
	}
	.tree-line-c {
		width: 2rpx;
		height: 40rpx;
		position: absolute;
		left: 50%;
		top: -50rpx;
		transform: translateX(-50%);
		margin: auto;
		background: #84643B;
		z-index: 8;
	}
	.tree-line-b {
		width: 2rpx;
		height: 34rpx;
		position: absolute;
		left: 50%;
		top: -84rpx;
		transform: translateX(-50%);
		margin: auto;
		background: #84643B;
		z-index: 8;
	}
	.tree-layout {
		position: relative;
	}
	.tree-t {
		width: 100%;
		height: 1rpx;
		position: absolute;
		left: 0;
		top: -48rpx;
		background: #84643B;
		z-index: 9;
	}
	.tree-l {
		width: calc(100% - 232rpx);
		height: 2rpx;
		position: absolute;
		left: 87rpx;
		top: -50rpx;
		background: #84643B;
		z-index: 9;
	}
	.tree-line-l {
		width: calc(50% + 2rpx);
		height: 1rpx;
		position: absolute;
		left: -2rpx;
		top: -50rpx;
		background: #84643B;
		z-index: 8;
	}
	.tree-layout-l {
		width: calc(50% - 1rpx);
		height: 8rpx;
		position: absolute;
		left: 0;
		top: -54rpx;
		background: #F6F1E7;
		
		z-index: 9;
	}
	
	.tree-c {
		width: 134rpx;
		flex-direction: column;
		position: relative;
		overflow: visible;
		height: 217rpx;
		//border: 1rpx solid #F6F1E7;
		background: #F6F1E7;
		padding: 20rpx;
		
		//min-width: 148rpx;
		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.tree-name {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 26rpx;
			color: #84643B;
			white-space: nowrap;
			margin-top: 5rpx;
		}

		.tree-subTitle {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 26rpx;
			color: #9F8F76;
			margin-top: 5rpx;
		}
	}
	.border {
		//border: 1rpx solid #84643B;
		border-radius: 20rpx;
	}
	.avatar-tx {
		width: 60rpx;
		height: 60rpx;
		background: #84643B;
		border-radius: 30rpx;
		font-size: 22rpx;
		color: #F6F1E7;
	}
	.wife {
		margin-left: 30rpx;
		position: relative;
		justify-content: flex-start;
		box-sizing: border-box;
		padding-top: 10rpx;
		min-width: 148rpx;
	}

	.wife::after {
		width: calc(50% + 60rpx);
		height: 1rpx;
		background: #9A805D;
		content: "";
		position: absolute;
		top: 112rpx;
		right: 50%;
		z-index: -1;
	}
	.tree-btn {
		width: 112rpx;
		height: 44rpx;
		background: #84643B;
		border-radius: 22rpx;
		border: 1px solid #84643B;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 22rpx;
		color: #F6F1E7;
		margin-top: 10rpx;
	}
</style>